<style scoped>
.dropdown-body{
	height: 200px;
	overflow-y: scroll;
	width: 100%;
}
.dropdown-body-item{
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	margin-top: 2px;
}
.form-image-hand{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}
.username-img{
	width: 100%;
	display: flex;
	align-items: center;
	font-size: 26px;
}
.username-img span{
	margin-left: 20px;
}
.input-telephon-qqmailbox{
	display: flex;
	width: 100%;
}
</style>
<template>
	<div class="navbar position-sticky top-0 left-0 bg-base-100/5 z-50 " >
		<!--分类菜单-->
		<div class="flex-none">
			<button class="btn btn-square btn-ghost">
				<svg
						class="inline-block w-5 h-5 stroke-current"
						fill="none"
						viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg">
					<path
							d="M4 6h16M4 12h16M4 18h16"
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"></path>
				</svg>
			</button>
		</div>

		<!--标题-->
		<div class="flex-1">
			<a
					class="btn btn-ghost text-xl"
					@click="JumpFun({ menuPath: '/' })"
			>综合服务网</a
			>
		</div>

		<!--页面菜单-->
		<div class="flex-none z-50">
			<ul class="menu menu-horizontal px-1">
				<li>
					<div class="dropdown dropdown-hover">
						<a tabindex="0">主题</a>
						<ul tabindex="0"  class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-32" style="margin-left: -30px;z-index: 222;margin-top: 252px">
							<div class="dropdown-body">
								<div v-for="itemColor in data.listColor" @click="handleChangeTheme(itemColor.name)"
										 class="dropdown-body-item" :style="'background-color:'+itemColor.bgColor+';color:'+itemColor.color">
									<a>{{itemColor.name}}</a>
								</div>
							</div>
						</ul>
					</div>

				</li>
				<li
						v-for="(item, index) in data.menu"
						@click="JumpFun(item)">
					<a>{{ item.menuName }}</a>
				</li>
			</ul>
		</div>

		<!--头像信息-->
		<div class="dropdown dropdown-end">
			<div
					class="btn btn-ghost btn-circle avatar"
					role="button"
					tabindex="0">
				<div class="w-10 rounded-full">
					<img
							:src="data.user.image?
							configuration.visitFileUrl + data.user.image
							:configuration.avatarUrl" alt="IMAGE" />
				</div>
			</div>
			<ul
					class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-24"
					tabindex="0">
				<li v-if="data.user.userId" @click="editProfileFun()"><a>账户信息</a></li>
<!--				<li><a>联系我们</a></li>-->
				<li v-if="data.loginPass === false">
					<el-popconfirm
							:icon="InfoFilled"
							cancel-button-text="No, Thanks"
							confirm-button-text="OK"
							icon-color="#626AEF"
							title="是否确定退出登录?"
							width="220"
							@confirm="storageFun">
						<template #reference>
							<a>退出登录</a>
						</template>
					</el-popconfirm>
				</li>
				<li v-if="data.loginPass"><a @click="data.loginShow = true">登录账户</a></li>
			</ul>
		</div>
		<div v-if="data.loginShow">
			<login-page @receive-login="receiveLogin"></login-page>
		</div>

		<el-drawer v-model="data.openMyUser" :with-header="false" size="420px" >
			<el-form
					ref="form"
					:model="data.user"
					:size="size"
					label-position="top"
					label-width="auto"
					style="user-select: none;"
			>
				<!--头像和账号-->
				<el-form-item  >
					<div class="username-img">
						<el-upload
								:action="configuration.uploadUrl"
								:before-upload="beforeAvatarUpload"
								:on-success="handleAvatarSuccess"
								:show-file-list="false"
								:auto-upload="true"
								:limit="1"
								method="POST"
						>
							<el-image :src="isEmpty(data.user.image)?
            'https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg':
             configuration.visitFileUrl+data.user.image"  class="form-image-hand" />
						</el-upload>
						<span>{{data.user.telephon}}</span>
						<el-icon  v-if="data.user.sex=='男'" style="color: #3274d7;margin-left: 5px"><Female /></el-icon>
						<el-icon v-if="data.user.sex=='女'" style="color:palevioletred;margin-left: 5px"><Male /></el-icon>
					</div>
				</el-form-item>
				<!--性别和是否展示开发人员-->
				<el-form-item >
					<el-radio-group v-model="data.user.sex">
						<el-radio label="男" >男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<!--昵称和手机号-->
				<el-form-item >
					<div class="input-telephon-qqmailbox">
						<el-input v-model="data.user.userName" placeholder="昵称"  />
						<el-input v-model="data.user.cellPhone" disabled placeholder="手机号"  />
					</div>
				</el-form-item>
				<!--年龄-->
				<el-form-item label="年龄">
					<el-input v-model="data.user.age" :rows="1" maxlength="3" placeholder="年龄" type="number"  />
				</el-form-item>
				<!--qq邮箱-->
				<el-form-item label="qq邮箱">
					<el-input v-model="data.user.email" :rows="1" placeholder="qq邮箱"  type="email"  />
				</el-form-item>
				<!--身份证号-->
				<el-form-item label="身份证号">
					<el-input v-model="data.user.sdcard" :rows="1" maxlength="18" placeholder="身份证号" type="text"  />
				</el-form-item>
				<!--修改密码-->
				<el-form-item label="修改密码">
					<el-input v-model="data.user.password" :rows="1" placeholder="修改密码" show-password type="password"  />
				</el-form-item>
				<!--现居住地址-->
				<el-form-item label="现居住地址" >
					<div class="input-telephon-qqmailbox">
						<el-input v-model="data.user.address" :rows="1" placeholder="现居住地址" style="width: 100%;" type="textarea" />
					</div>
				</el-form-item>
				<!--详细地址-->
				<el-form-item label="详细地址">
					<el-input v-model="data.user.detailedAddress" :rows="2" placeholder="详细地址" type="textarea"  />
				</el-form-item>
				<!--兴趣爱好-->
				<el-form-item label="兴趣爱好">
					<el-input v-model="data.user.hobby" :rows="3" placeholder="兴趣爱好" type="textarea"  />
				</el-form-item>
			</el-form>
			<div style="display: flex;justify-content: flex-end">
				<el-button @click="data.openMyUser = false">关闭</el-button>
				<el-button type="primary" @click="postUpdateUserFun()">保存</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue'
import { postQueryMenuItem } from '../interface/menuApi.js'
import router from '../router/index.js'
import {getSelUserInfo, getUpdateOffline, getVerifyUser, postUpdateUser} from '../interface/UserApi.js'
import { configuration } from '../../env.product.js'
import LoginPage from './loginPage.vue'
import {ElMessage, ElNotification} from "element-plus";
import {IdCardVerify, isEmpty} from "../config/Tool.js";
import {postDeleteFile} from "../interface/fileApi.js";
import {AdressTrans, randomCity} from "../config/MapTrans.js";

const reload2 = inject('reload2')
const data = ref({
	menu: [],
	user: {
		image: ''
	},
	listColor:[
		{name:'light',bgColor:'#ffffff',color:'#000000'},
		{name:'dark',bgColor:'#000000',color:'#ffffff'},
		// {name:'cupcake',color:'#FAF7F5'},
		// {name:'bumblebee',color:'#ffffff'},
		// {name:'emerald',color:''},
		// {name:'corporate',color:''},
		{name:'synthwave',bgColor:'#170D37',color:'#ffffff'},
		{name:'retro',bgColor:'#E4D8B4',color:'#000000'},
		{name:'cyberpunk',bgColor:'#E9DC41',color:'#ffffff'},
		{name:'valentine',bgColor:'#E3D2DE',color:'#000000'},
		{name:'halloween',bgColor:'#1D1D1D',color:'#ffffff'},
		{name:'garden',bgColor:'#D4D2D2',color:'#000000'},
		{name:'forest',bgColor:'#140F0F',color:'#ffffff'},
		{name:'aqua',bgColor:'#2E5497',color:'#ffffff'},
		{name:'lofi',bgColor:'#F2F2F2',color:'#000000'},
		// {name:'pastel',color:''},
		// {name:'fantasy',color:''},
		// {name:'wireframe',color:''},
		{name:'black',bgColor:'#141414',color:'#ffffff'},
		{name:'luxury',bgColor:'#171618',color:'#ffffff'},
		{name:'dracula',bgColor:'#232530',color:'#ffffff'},
		// {name:'cmyk',color:''},
		// {name:'autumn',color:''},
		{name:'business',bgColor:'#1C1C1C',color:'#ffffff'},
		// {name:'acid',color:''},
		{name:'lemonade',bgColor:'#E1E6D9',color:'#000000'},
		{name:'night',bgColor:'#0C1425',color:'#ffffff'},
		{name:'coffee',bgColor:'#1C131B',color:'#ffffff'},
		// {name:'winter',color:'#F2F7FF'},
		{name:'dim',bgColor:'#242933',color:'#ffffff'},
		{name:'nord',bgColor:'#E5E9F0',color:'#000000'},
		{name:'sunset',bgColor:'#0E171E',color:'#ffffff'},
	],
	loginShow: false,
	loginPass: true,
	imageShow: true,
	openMyUser:false,
})
const contributors=ref([]);
onMounted((e) => {
	verifyUser();
	postSelMenuFun();
})

/**
 * 账户信息
 */
function editProfileFun() {
	data.value.openMyUser = true;
	//window.open(configuration.openAdminUrl + '?token=' + localStorage.getItem('token'), '_blank')
}
/**
 * 修改账户信息
 */
const postUpdateUserFun=async ()=>{
	let passIdCard =IdCardVerify(data.value.user.sdcard);
	data.value.user.sex = passIdCard?.sex;
	let AdressTransRes = await AdressTrans(data.value.user?.detailedAddress || randomCity);
	data.value.user.coordinate=AdressTransRes.location[0];
	postUpdateUser(data.value.user).then((res)=>{
		if (res.code===200){
			new selUserInfoFun();
			ElNotification({title: 'Success', message: '修改成功', type: 'success'});
			data.value.openMyUser=false;
		}else {
			new selUserInfoFun();
			ElNotification({title: 'Error', message: '修改失败', type: 'error'})
		}
	})


}

/**
 * 头像上传成功
 */
function handleAvatarSuccess (response, uploadFile) {
	//删除原来图片防止占用内存
	if (response.code===200){
		let uploadImg = response.data.fileName;
		postDeleteFile({file:data.value.user.image});
		setTimeout(()=>{
			data.value.user.image=uploadImg;
			postUpdateUser(data.value.user).then((res)=>{
				if (res.code===200){
					ElNotification({title: 'Success', message: '头像上传成功', type: 'success'})
				}else {
					ElNotification({title: 'Error', message: '上传失败', type: 'error'})
				}
			})
		},1000)
	}

}
/**
 * 头像上传之前（校验）
 */
function beforeAvatarUpload(rawFile){
	const allowedImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'];
	if (!allowedImageTypes.includes(rawFile.type)) {
		ElMessage.error('上传的头像必须是图片格式！');
		return false;
	}else if (rawFile.size / 1024 / 1024 > 5) {
		ElMessage.error('Avatar picture size can not exceed 5MB!');
		return false;
	}
	return true;
}


/**
 * 退出登录
 */
const storageFun = () => {
	getUpdateOffline()
	localStorage.removeItem('token')
	data.value.user = { image: '' }
	data.value.loginPass = true
	data.value.imageShow = true
	reload2()
}

/**
 * 页面跳转
 */
function JumpFun(e) {
	router.push({ path: e.menuPath, query: {url:e.param} })
}

/**
 * 查询菜单
 */
function postSelMenuFun() {
	postQueryMenuItem({
		parentId: 4,
		parentCode: 'web-2001'
	}).then((res) => {
		if (res.code === 200) {
			data.value.menu = res.data
		} else {
			data.value.menu = [1]
		}
	})
}



/**
 * 校验用户是否已经登录
 */
async function verifyUser() {
	getVerifyUser().then((res) => {
		if (res.code === 200) {
			localStorage.setItem('token', res.data)
			new selUserInfoFun()
		} else {
			localStorage.removeItem('token')
		}
	})
}

/**
 * 查询用户信息
 * @constructor
 */
function selUserInfoFun() {
	getSelUserInfo().then((res) => {
		if (res.code === 200) {
			data.value.user = res.data
			data.value.loginPass = false
			if (res.data.user?.image.length >= 3) {
				data.value.imageShow = false
			}
		}
	})
}

/**
 * 接收登录状态
 */
function receiveLogin(e) {
	data.value.loginShow = false
	new selUserInfoFun()
}

/**
 * 主题设置
 */

function handleChangeTheme(item){
	const html = document.getElementsByTagName('html')[0]
	html.dataset.theme = item;
}

</script>
